<template>
  <div class="app-container  bg-gray">
    <el-card class="box-1">
      <div class="header">
        <div>
          <el-select v-model="searchTerms.status" placeholder="正常 | 禁用" class="select" clearable @change="getData">
            <el-option label="正常" value="1"/>
            <el-option label="禁用" value="0"/>
          </el-select>
          <el-input v-model="searchTerms.searchText" placeholder="请输入内容" class="search-input" @change="getData"/>
          <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
        </div>
        <div>
          <el-button type="success" class="bg-green" icon="el-icon-circle-plus" @click="showDialog()">新增分区
          </el-button>
        </div>
      </div>
      <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row
                @sort-change="handleSortChange">
        <el-table-column prop="name" label="分区名称" min-width="140" header-align="center" align="center"/>
        <el-table-column label="分区ICON" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.iconUrl" style="width: 60px;height: 60px;border-radius: 60px"/>
          </template>
        </el-table-column>
        <el-table-column prop="videoCount" label="视频数" width="100" header-align="center" align="center" sortable/>
        <el-table-column prop="sort" label="权重" width="100" header-align="center" align="center" sortable/>
        <el-table-column prop="status" label="状态" width="140" header-align="center" align="center">
          <template slot-scope="scope">
            <div @click="toChangeStatus(scope.row)">
              <el-tag v-if="scope.row.status===1" type="success">正常</el-tag>
              <el-tag v-else type="danage">已禁用</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="success" size="mini" class="bg-green" @click="showDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="toDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"/>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" :modal="false" :title="dialogForm['title']"
               style="background-color: rgba(60, 60, 60, 0.8)" width="460px" class="dialog" center>
      <el-form ref="dialogForm" :model="dialogForm" label-width="100px">
        <el-form-item label="图标">
          <ws-upload-single-img v-model="dialogForm['iconId']"
                                :path="dialogForm['iconUrl']?ImageUrl+dialogForm['selectedIconPath']:''"
                                width="80" height="80"/>
          <div class="remark">*注:为保证显示效果,请上传80px*80px的图片</div>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="dialogForm['name']"/>
        </el-form-item>
        <el-form-item label="权重">
          <el-input-number v-model="dialogForm.sort"/>
          <div class="remark">*注：权重越大排序越前</div>
        </el-form-item>
        <el-form-item label="跳转页面" prop="pages">
          <el-select v-model="dialogForm['pageId']" placeholder="请选择跳转页面">
            <el-option v-for="item in pagePathList" :key="item.id" :value="item.id" :label="item.name"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitForm('dialogForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { handleSortChange, handleSizeChange, handleCurrentChange, parseTime } from '../../../../utils/table'

  export default {
    data() {
      return {
        searchTerms: {
          page: 0,
          pageSize: 20,
          searchText: ''
        },

        companyList: [],

        // 表格相关数据
        tableMaxHeight: document.documentElement.clientHeight - 320,
        multipleSelection: [],
        tableLoading: false,
        currentPage: 1,
        pageSize: this.$store.getters.userInfo.pageSize,
        pageSizes: [10, 20, 50, 100, 1000],
        total: 0,
        tableData: [],

        // 小程序页面路径
        pagePathList: [],
        // tabbar修改弹窗
        dialogVisible: false,
        dialogForm: {
          title: '新增分区',
          name: '',
          iconId: '',
          iconUrl: '',
          pageId: '',
          sort: ''
        }
      }
    },
    created() {
      this.getData();
      this.loadWxPagePathList();
    },
    methods: {
      handleCurrentChange, handleSizeChange, handleSortChange, parseTime,
      getData(order) {
        this.tableLoading = true
        order || (order = {})
        const url = '../videoAdmin/cat/getList'
        const data = {
          page: this.currentPage,
          pageSize: this.pageSize,
          searchText: this.searchTerms.searchValue
        }
        order.sortName && (data.sortName = order.sortName)
        order.sortOrder && (data.sortOrder = order.sortOrder)
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.tableData = res.data.list
          this.total = res.data.count
          this.tableLoading = false
        }).catch(e => {
          this.tableLoading = false
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },
      // 获取小程序页面路径
      loadWxPagePathList() {
        const url = 'navigation/pagePath';
        const data = { type: 1 };
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.pagePathList = res.data;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      },
      // 显示编辑弹窗
      showDialog(row) {
        this.dialogVisible = true;
        this.dialogForm = row || {};
        this.dialogForm['title'] = row ? '编辑分区' : '添加分区'
      },

      // 提交
      submitForm(formName) {
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            const url = (this.dialogForm['id'] !== undefined && this.dialogForm['id'] != null && this.dialogForm['id'] !== '') ? '../videoAdmin/cat/updateInfo' : '../videoAdmin/cat/create';
            const data = Object.assign({}, this.dialogForm);
            this.$store.dispatch('GetConnect', { url, data }).then(res => {
              this.dialogVisible = false;
              this.$message.success(res.msg);
              this.dialogForm = {};
              this.getData();
            }).catch(e => {
              this.$message.error(e.msg + ',请刷新或联系管理员')
            })
          }
        })
      },

      // 修改导航图标状态
      toChangeStatus(row) {
        row.status = row.status === 0 ? 1 : 0;
        const url = '../videoAdmin/cat/updateStatus';
        const data = { id: row.id, status: row.status };
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg);
          this.getData();
        }).catch(e => {
          row.status = row.status === 0 ? 1 : 0;
          this.$message.error(e.msg);
        })
      },

      // 删除导航图标
      toDelete(row) {
        const url = '../videoAdmin/cat/delete';
        const data = {
          id: row.id
        }
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg);
          this.loadTabbarList();
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

  .box-1 {
    .header {
      @include flex-row(center, space-between);
      padding: 10px 0;

      div {
        @include flex-row(center, flex-start);
        flex-wrap: wrap;
      }

      .el-select {
        padding-right: 15px;
        width: 180px;
      }

      .search-input {
        width: 240px;
      }

      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
    }
  }

  .dialog {
    .content {
      text-align: center
    }
  }

  .el-tag {
    cursor: pointer;
  }
</style>
